<template>
  <view class="ai-quick-replies ai-scroll-view ai-scroll-view--x ai-scroll-view--hasControls">
    <ai-icon-button icon="icon-left" style-class="ai-scroll-view-control" @click="handlePre"></ai-icon-button>
    <scroll-view class="ai-scroll-view-scroller" scroll-with-animation :scroll-x="true" :scroll-left="scrollLeft"
      @scroll="onScroll">
      <view class="ai-scroll-view-item" v-for="item in items" :key="'qk-rep-' + item.code" >
        <ai-quick-reply v-bind="item" @click="handleQuickReply"></ai-quick-reply>
      </view>
    </scroll-view>
    <ai-icon-button icon="icon-right" style-class="ai-scroll-view-control" @click="handleNext"></ai-icon-button>
  </view>
</template>

<script>
  export default {
    name: "ai-quick-replies",
    emits: [ "quickReplyClick", "scroll" ],
    props: {
      items: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        scrollLeft: 0,
        scrollWidth: 0
      };
    },
    methods: {
      onScroll(e) {
        this.$emit("scroll", e)
      },
      handlePre() {
        const query = uni.createSelectorQuery().in(this)
        query.select(".ai-scroll-view-scroller").boundingClientRect(data => {
          const offsetLeft = data.left
          const offsetWidth = data.width
          this.scrollWidth = offsetWidth
          this.scrollLeft = offsetLeft - offsetWidth
        }).exec()
      },
      handleNext() {
        const query = uni.createSelectorQuery().in(this)
        query.select(".ai-scroll-view-scroller").boundingClientRect(data => {
          const offsetLeft = data.left
          const offsetWidth = data.width
          this.scrollWidth = offsetWidth
          this.scrollLeft = offsetLeft + offsetWidth
        }).exec()
      },
      handleQuickReply(e) {
        this.$emit("quickReplyClick", e)
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-scroll-view {
    overflow: hidden;

    &-scroller {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none; // IE/Edge
      scrollbar-width: none; // FF

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .ai-scroll-view--x {
    .ai-scroll-view-scroller {
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
    }
  }

  .ai-scroll-view--hasControls {
    display: flex;
    align-items: center;

    .ai-scroll-view-scroller {
      flex: 1;
    }
  }

  .ai-quick-replies {
    padding: $quick-replies-padding;
    transition: opacity 0.3s;

    &[data-visible='false'] {
      visibility: hidden;
      opacity: 0;
    }

    .ai-scroll-view-item {
      display: inline-block;
      // flex: 0 0 auto;
      margin-left: $scroll-view-spacing-x;

      &:first-child {
        margin-left: 0;
      }
    }

  }
</style>